{% extends 'base.html' %}

{% block title %}分配工单 - {{ ticket.title }}{% endblock %}

{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title mb-0">分配工单: {{ ticket.title }}</h3>
                </div>
                <div class="card-body">
                    <!-- 工单基本信息 -->
                    <div class="alert alert-info">
                        <strong>当前状态:</strong> 
                        <span class="badge bg-warning">{{ ticket.get_status_display }}</span>
                        {% if ticket.assigned_to %}
                        <strong class="ms-3">当前分配:</strong> {{ ticket.assigned_to.username }}
                        {% else %}
                        <strong class="ms-3">当前分配:</strong> <span class="text-muted">未分配</span>
                        {% endif %}
                    </div>

                    <div class="mb-4">
                        <h5>工单信息</h5>
                        <div class="border rounded p-3">
                            <p><strong>创建者:</strong> {{ ticket.created_by.username }}</p>
                            <p><strong>优先级:</strong> 
                                <span class="badge 
                                    {% if ticket.priority == 'high' %}bg-danger
                                    {% elif ticket.priority == 'medium' %}bg-warning
                                    {% else %}bg-info{% endif %}">
                                    {{ ticket.get_priority_display }}
                                </span>
                            </p>
                            <p><strong>问题描述:</strong></p>
                            <div class="bg-light p-2 rounded">
                                {{ ticket.description|linebreaks }}
                            </div>
                            {% if ticket.assets.exists %}
                            <p class="mt-2"><strong>关联设备:</strong>
                                {% for asset in ticket.assets.all %}
                                <span class="badge bg-light text-dark me-1">{{ asset.code }}</span>
                                {% endfor %}
                            </p>
                            {% endif %}
                        </div>
                    </div>

                    <!-- 分配操作 -->
                    <div class="mb-4">
                        <h5>分配技术人员</h5>
                        <div class="border rounded p-3">
                            <form method="post">
                                {% csrf_token %}
                                
                                <div class="mb-3">
                                    <label for="technician" class="form-label">选择技术人员:</label>
                                    <select class="form-select" id="technician" name="technician" required>
                                        <option value="">-- 请选择技术人员 --</option>
                                        {% for technician in technicians %}
                                        <option value="{{ technician.id }}" 
                                            {% if ticket.assigned_to == technician %}selected{% endif %}>
                                            {{ technician.username }} ({{ technician.get_full_name|default:technician.username }})
                                        </option>
                                        {% endfor %}
                                    </select>
                                    <div class="form-text">请选择负责处理此工单的技术人员</div>
                                </div>

                                <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                                    <a href="{% url 'tickets:ticket_list_all' %}" class="btn btn-secondary me-md-2">
                                        取消返回
                                    </a>
                                    <button type="submit" class="btn btn-primary">
                                        ✅ 确认分配
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>

                    <!-- 技术人员信息 -->
                    {% if technicians %}
                    <div class="mb-4">
                        <h5>可用技术人员</h5>
                        <div class="border rounded p-3">
                            <div class="row">
                                {% for technician in technicians %}
                                <div class="col-md-6 mb-2">
                                    <div class="card">
                                        <div class="card-body">
                                            <h6 class="card-title">{{ technician.username }}</h6>
                                            <p class="card-text mb-1">
                                                <small class="text-muted">
                                                    {{ technician.get_full_name|default:"未设置姓名" }}
                                                </small>
                                            </p>
                                            <p class="card-text mb-0">
                                                <small>
                                                    邮箱: {{ technician.email|default:"未设置邮箱" }}
                                                </small>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                {% endfor %}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.container {
    max-width: 800px;
    margin: 20px auto;
}
.card {
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    border: none;
    border-radius: 8px;
}
.card-header {
    background-color: #2c3e50;
    color: white;
    border-radius: 8px 8px 0 0 !important;
}
.badge {
    font-size: 0.85em;
    padding: 0.5em 0.75em;
}
.btn {
    border-radius: 5px;
    padding: 10px 20px;
}
.alert {
    border-radius: 5px;
    margin-bottom: 20px;
}
.border {
    border-radius: 5px;
}
.form-select {
    border-radius: 5px;
}
</style>
{% endblock %}
